<template>
    <div class="person">
   <h1>A:{{ a }}</h1>
    <h1>B:{{ b }}</h1>
    <ul>
        <li v-for="person in list" :key="person.id">
            {{ person.name }} -- {{ person.age }}
        </li>
    </ul>
    </div>
</template>

<script lang="ts" setup name="Person">
//TS自定义接口限制对象类型属性
import {type PersonInter,type Persons} from '@/types'
import {  } from 'vue';


//接受父组件传过来的值a,b,personlist并转给o
let o=defineProps(['a','b','list'])

//接受父组件传过来的list,限制类型
// defineProps<{list:Persons}>()

//接受父组件传过来的list+限制类型+限制必要性+指定默认值
// withDefaults(defineProps<{list?:Persons}>(),{
//     list:()=>[{id:"sa23rrwe",name:"zhangsan",age:30},
//         {id:"asr4",name:"lisi",age:21},
//         {id:"dd1re",name:"wangwu",age:23}
//     ]
// })

console.log(o)
</script>

<style>
    .person{
        background-color:skyblue;
        box-shadow:0 0 10px;
        border-radius:10px;
        padding:20px;
    }
    button{
        margin:0 5px;
    }
</style>